import type { ReactNode } from 'react';
import React, { useCallback } from 'react';
import ReactResizeDetector from 'react-resize-detector';

interface CustomRenderProps {
  content: ReactNode;
  onResize: (size: { width: number; height: number }) => void;
}

export default function (props: CustomRenderProps) {
  const { content, onResize } = props;

  const onResize_ = useCallback((width: number, height: number) => {
    onResize({ width, height });
  }, []);

  if (!content) return null;

  return (
    <div>
      <ReactResizeDetector handleWidth handleHeight refreshMode="debounce" onResize={onResize_}>
        {content}
      </ReactResizeDetector>
    </div>
  );
}
